<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面-VANS</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">	
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="content/ui/global/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<style type="text/css">
	@charset "utf-8";
	/* CSS Document */
	*{margin:0px auto;pdding:0px;}
	body{margin:0px auto;padding:0px;width:100%;height:100%;
		background:url(content/ui/img/bg_sea1.jpg) no-repeat;
		background-attachment:fixed;
		background-size: cover;
		-webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */
		-o-background-size: cover;/* 兼容Opera */
		zoom: 1; }
	#login_div{width:380px;height:300px;background-color:#FFF;border-radius:8px;
				position:absolute;left:50%;top:50%;margin-left:-190px;margin-top:-150px;
				filter:alpha(opacity=80); /*ie滤镜，透明度50%*/
				-moz-opacity:0.8; /*Firefox私有，透明度50%*/
				opacity:0.8;/*其他，透明度50%*/}
				
	#login_head{width:100%;height:50px;background-color:#3187C2;border-radius:8px 8px 0 0;}
	#login_head p{color:#FFF;font-size:14px;line-height:5px;}	
	#login_btn{width:85%;padding-left:1%;font-family:"幼圆";color:#76869F;font-size:12px;height:210px;}	
	#login_sub{text-align:center;font-family:"黑体";}
	
	.login_footer{width:100%;height:40px;background-color:#E0E4EF;border-radius:0 0 8px 8px;
      font-size:13px;color:#f44336;font-family: "微软雅黑";font-weight:800;line-height: 40px;text-align: center;}
	
	#slider {
	  width: 100%;
	  height: 34px;
	  position: relative;
	  border-radius: 4px;
	  background-color: #dae2d0;
	  overflow: hidden;
	  text-align: center;
	  user-select: none;
	  -moz-user-select: none;
	  -webkit-user-select: none;
	}

	#slider_bg {
	  position: absolute;
	  left: 0;
	  top: 0;
	  height: 100%;
	  background-color: #7AC23C;
	  z-index: 1;
	}

	#label {
	  width: 46px;
	  position: absolute;
	  left: 0;
	  top: 0;
	  height: 34px;
	  line-height: 34px;
	  border-radius:4px;
	  border: 1px solid #cccccc;
	  background: #fff;
	  z-index: 3;
	  cursor: move;
	  color: #ff9e77;
	  font-size: 16px;
	  font-weight: 900;
	}

	#labelTip {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  font-size: 13px;
	  font-family: 'Microsoft Yahei', serif;
	  color: #787878;
	  line-height: 34px;
	  text-align: center;
	  z-index: 2;
	}

</style>

<body>
	<div id="login_div">
    	<div id="login_head">
        	<table>
            	<tr style="height:17px;">
                </tr>
            	<tr>
                	<td style="width:50%;"><p>VANS管理系统</p></td>
                    <td style="width:50%;"></td>             
                </tr>
                <tr>
                	<td><p>vans managenment system</p></td>
                    <td></td>
                </tr>
            </table>   
        </div>
    	<div id="login_btn">
        	<br/>
        	<div class="form-group">
            	<table style="width:100%;">
                    <tr>
                    	<td style="width:14%;text-align:right;"><label class="control-label" for="inputSuccess1">用户名</label></td>
                        <td style="width:1%;"></td>
              			<td style="width:85%;" colspan="2"><input type="text" class="form-control" id="username" placeholder="请输入用户名"></td>
              		</tr>
                </table>
            </div>
            <div class="form-group">
            	<table style="width:100%;">
                    <tr>
                        <td style="width:14%;text-align:right;"><label class="control-label" for="inputPassword">密&nbsp;&nbsp;码</label></td>
                        <td style="width:1%;"></td>
                        <td style="width:85%;" colspan="2"><input type="password" class="form-control" id="password" placeholder="请输入密码（6-18位数字+字母）"></td> 
                    </tr>
                </table>  
            </div>
            <div class="form-group">
            	<table style="width:100%;">
                <tr>
                  <td style="width:14%;text-align:right;"><label class="control-label" for="inputVericode">验证码</label></td>
                  <td style="width:1%;"></td>
                  <td style="width:85%;">
                    <div id="slider">
                      <div id="slider_bg"></div>
                      <span id="label">>></span> <span id="labelTip">拖动滑块验证</span>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
            <div id="login_sub">
                <button type="button" class="btn btn-warning" id="loginBtn" onclick="onLogin()" style="width:100%;">登&nbsp;&nbsp;录</button>	
            </div>
        </div>
    	<div class="login_footer">
        	<span id="errorText">系统版本v1.0&nbsp;&nbsp;如有任何疑问，请联系管理员！</span>   
        </div>
    </div>

<script src="content/ui/global/jQuery/jquery-1.9.1.min.js"></script> 
<script src="content/ui/base/jquery.slideunlock.js"></script>
<script src="./config/index.js"></script>
<script>
  var silderValue = false;
  $(function () {
      var slider = new SliderUnlock("#slider",{
      successLabelTip : "恭喜您，验证成功"	
    },function(){
      silderValue = true;
    });
    slider.init();
  })

  //捕获回车事件登录
  document.onkeydown = function(event_e){
    if(window.event)
      event_e = window.event;
    var int_keycode = event_e.charCode||event_e.keyCode;
    if(int_keycode ==13){
      onLogin();
    }
  }
  //界面加载自动聚焦到用户名输入框
  document.getElementById("username").focus();

  function onLogin(){
    $("#loginBtn").attr('disabled',"true");
    var userName = $("#username").val();
    var password = $("#password").val();
    var errorText = "";
    if( userName == "" ){
      errorText = "错误提示：请输入用户名";
      $("#errorText").text(errorText);
      $("#loginBtn").removeAttr("disabled");
      return
    }else if( password == "" ){
      errorText = "错误提示：请输入密码";
      $("#errorText").text(errorText);
      $("#loginBtn").removeAttr("disabled");
      return
    }else if( silderValue == false ){
      errorText = "错误提示：请拖动滑块验证";
      $("#errorText").text(errorText);
      $("#loginBtn").removeAttr("disabled");
      return
    }
    errorText = "提示：验证通过，登录中...";
    $("#errorText").text(errorText);
    var params = {userName:userName,password:password};
    params = JSON.stringify(params);
    $.ajax({
      type: 'POST',
      url: BaseUrl + '/auth/token',
      dataType: "json",
      contentType:"application/json",
      data:params,
      success:function(data){
        errorText = "提示：登录成功，页面跳转中...";
        $("#errorText").text(errorText);
        if( data.responseCode == 0 ){
          sessionStorage.setItem( "token", data.data );
          window.location.href= AppPath + "/static/index.html";
        }else{
          errorText = "提示：用户名或密码错误，请重试...";
          $("#errorText").text(errorText);
        }
      },
      error:function(xhr){
        errorText = "错误提示：" + xhr.status;
        $("#errorText").text(errorText);
      }
    });
    $("#loginBtn").removeAttr("disabled");
  }
</script> 
</body>
</html>
